<template>
  <div class="w-full">
    <div class="flex items-center justify-between mb-2">
      <h2 class="text-xl font-bold text-text-primary my-6">当前热门影片</h2>
      <UiButton variant="ghost" size="sm">查看更多</UiButton>
    </div>
    <div :class="`movie-grid gap-4 ${gridColsClass}`">
      <div
        v-for="movie in movies"
        :key="movie.id"
      >
        <MovieCard
          :cover-url="movie.coverUrl"
          :title="movie.title"
          :rating="movie.rating"
          :tags="movie.tags"
          :is-ai="movie.isAi"
          :show-tags="true"
          @click="goDetail(movie.id)"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useUiStore } from '../../store/useUiStore'
import { storeToRefs } from 'pinia'
import MovieCard from './MovieCard.vue'
import { UiButton } from '../ui'

// Props
interface Props {
  movies: any[]
}

const props = withDefaults(defineProps<Props>(), {
  movies: () => []
})

const router = useRouter()
const uiStore = useUiStore()
const { gridColsClass } = storeToRefs(uiStore)

const goDetail = (id: number) => {
  console.log('HotMoviesRow: 点击电影卡片，ID:', id)
  router.push({ name: 'MovieDetail', params: { id } })
}
</script>